<link type="text/css" href="/resources/css/humanity/jquery-ui-1.8.16.custom.css" rel="stylesheet" />
<link type="text/css" href="/resources/css/main.css" rel="stylesheet" />
<style>
	/* html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,select,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,button,caption,cite,code,dfn,em,input,optgroup,option,select,strong,textarea,th,var{font:inherit}del,ins{text-decoration:none}li{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:baseline}sub{vertical-align:baseline}legend{color:#000}body{font:13px/1.231 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small}select,input,textarea,button{font:99% arial,helvetica,clean,sans-serif}table{font-size:inherit;font:100%}pre,code,kbd,samp,tt{font-family:monospace;*font-size:108%;line-height:100%} */
</style>
<script type="text/javascript" src="/resources/js/chrome_ex_oauthsimple.js"></script>
<script type="text/javascript" src="/resources/js/chrome_ex_oauth.js"></script>
<script type="text/javascript" src="/resources/js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="/resources/js/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="/resources/js/jquery.timers.js"></script>

<script type="text/javascript" src="/app/globals.js"></script>
<script type="text/javascript" src="/app/model.js"></script>
<script type="text/javascript" src="/app/spreadsheet.js"></script>
<script type="text/javascript" src="/app/voc.js"></script>
<script type="text/javascript" src="/app/utils.js"></script>
<script type="text/javascript" src="/app/main.js"></script>

<script type="text/javascript" src="/app/popup.js"></script>
<script type="text/javascript" src="/app/options.js"></script>

<script type="text/javascript">
	
</script>

<style>
  .container { position: relative; }
  .view { position: absolute; }
  #editViewCaption { font-style: bold; font-size: 1.4em; padding: 5px; }
  #editViewDescription { width: 100%; }
</style>

<body>
<div id="header" class="ui-state-default ui-corner-top">
	<table><tr><td width="30">
	<button id="backButton" class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-w"><span class="ui-icon ui-icon-triangle-1-w"></span></button>
   	</td><td>
    <span id="title">YoVoc</span> - <span>Youniversal vocabulary</span>
	</td></tr></table>
</div>
<div class="container">
	<div id="listView" class="view">
		<input id="tfTerm" type="text" />
		<ul id="mainList">
			<li><a href="#1" onclick="goToEdit(this);">Term 1</a></li>
			<li><a href="#2">Term 2</a></li>
			<li><a href="#3">Term 3</a></li>
			<li><a href="#4">Term 4</a></li>
			<li><a href="#5">Term 5</a></li>
			<li><a href="#6">Term 6</a></li>
			<li><a href="#7">Term 7</a></li>
			<li><a href="#8">Term 8</a></li>
			<li><a href="#9">Term 9</a></li>
			<li><a href="#10">Term 10</a></li>
		</ul>
		<div id="options">
			<table><tr><td>
			<button onclick="popupManager.nextView('#editOptions'); return false;" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary" role="button" aria-disabled="false"><span class="ui-button-icon-primary ui-icon ui-icon-gear"></span><span class="ui-button-text">Options</span></button>
			</td><td align="right">
			<button onclick="utils.goToStatistics();" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary" role="button" aria-disabled="false"><span class="ui-button-icon-primary ui-icon ui-icon-image"></span><span class="ui-button-text">Statistics</span></button>
			</td></tr></table>
		</div>
  </div>
	<div id="editView" class="view">
    <div id="editViewCaption"></div>
  <!--   <div id="editViewDeleteButton">Delete</div>  -->
    <input type="text" id="editViewDescription" />
    <ol class="list" id="editViewList">
    </ol>
	</div>
	
	<div id="editOptions" class="view">
		<table>
			<tr>
				<td>Active</td>
				<td><input id="notification_active" type="checkbox" checked=true></td>
			</tr>
			<tr>
				<td>Frequency</td>
				<td><input id="notification_frequency" type="input" value="10"> sec.</td>
			</tr>
			<tr>
				<td>Delay</td>
				<td><input id="notification_delay" type="input" value="10"> sec.</td>
			</tr>
			<tr>
				<td>Type</td>
				<td>
					<select id="notification_type">
						<option value="0">Testing</option>
						<option value="1">Guethering</option>
					</select>
				</td>
			</tr>
			
		</table>

		<button onclick="optionsManager.saveOptionForm(); return false;">Apply</button>
	</div>
	
	<div id="statistics" class="view">
		<img src="" />
	</div>
	
</div>  
  <script type="text/javascript">
//  onload = optionsManager.fillOptionForm();
    $(function() {
      popupManager.setupHeader('#header');
      popupManager.nextView('#listView');
    });
  </script>
</body>
